'use client'

import React, { ReactNode, useCallback, useState } from 'react'
import { 
  Box, 
  useColorModeValue,
  Text,
  VStack,
  Icon
} from '@chakra-ui/react'
import { FiUpload } from 'react-icons/fi'
import { DragItem, DropResult } from '@/types/drag-drop'

interface DropTargetProps {
  id: string;
  children?: ReactNode;
  onDrop?: (result: DropResult) => void;
  acceptTypes?: string[];
  className?: string;
}

export const DropTarget: React.FC<DropTargetProps> = ({
  id,
  children,
  onDrop,
  acceptTypes = ['chapter', 'character', 'folder'],
  className = ''
}) => {
  const [isDragOver, setIsDragOver] = useState(false)
  
  const bgColor = useColorModeValue('white', 'gray.800')
  const dragOverBgColor = useColorModeValue('blue.50', 'blue.900')
  const borderColor = useColorModeValue('gray.200', 'gray.600')
  const dragOverBorderColor = useColorModeValue('blue.400', 'blue.500')
  
  const handleDragOver = useCallback((e: React.DragEvent<HTMLDivElement>) => {
    e.preventDefault()
    e.stopPropagation()
    
    // 检查拖拽项类型是否可接受
    try {
      const dragData = JSON.parse(e.dataTransfer.getData('application/json'))
      const items = dragData.items as DragItem[]
      
      if (items.some(item => acceptTypes.includes(item.type))) {
        setIsDragOver(true)
        e.dataTransfer.dropEffect = 'copy'
      } else {
        e.dataTransfer.dropEffect = 'none'
      }
    } catch (error) {
      e.dataTransfer.dropEffect = 'none'
    }
  }, [acceptTypes])
  
  const handleDragLeave = useCallback((e: React.DragEvent<HTMLDivElement>) => {
    e.preventDefault()
    e.stopPropagation()
    setIsDragOver(false)
  }, [])
  
  const handleDrop = useCallback((e: React.DragEvent<HTMLDivElement>) => {
    e.preventDefault()
    e.stopPropagation()
    setIsDragOver(false)
    
    try {
      const dragData = JSON.parse(e.dataTransfer.getData('application/json'))
      const items = dragData.items as DragItem[]
      
      // 过滤出可接受的拖拽项
      const acceptedItems = items.filter(item => acceptTypes.includes(item.type))
      
      if (acceptedItems.length > 0) {
        const result: DropResult = {
          dropTargetId: id,
          items: acceptedItems,
          success: true,
          message: `成功接收${acceptedItems.length}个项目`
        }
        
        if (onDrop) {
          onDrop(result)
        }
      }
    } catch (error) {
      console.error('拖放处理失败:', error)
    }
  }, [id, onDrop, acceptTypes])
  
  return (
    <Box
      className={`drop-target ${className} ${isDragOver ? 'drag-over' : ''}`}
      onDragOver={handleDragOver}
      onDragLeave={handleDragLeave}
      onDrop={handleDrop}
      bg={isDragOver ? dragOverBgColor : bgColor}
      borderWidth={2}
      borderStyle="dashed"
      borderColor={isDragOver ? dragOverBorderColor : borderColor}
      borderRadius="md"
      p={4}
      transition="all 0.2s"
      position="relative"
      minH="100px"
    >
      {isDragOver ? (
        <VStack spacing={2} justify="center" h="100%">
          <Icon as={FiUpload} boxSize={6} color={dragOverBorderColor} />
          <Text color={dragOverBorderColor}>释放以添加内容</Text>
        </VStack>
      ) : children}
    </Box>
  )
} 